<template>
	<view class="box">
		<view class="info_box">
			<view class="top">
				<image :src="info.iimage" class="img"></image>
				<view class="right_box">
					<view class="name">{{info.name}}</view>
					<view>
						<text class="msg">价格:</text>
						<text class="msg red">￥</text>
						<text class="red price">{{info.price}}</text>
					</view>
				</view>
			</view>
			<view class="center">
				<view class="input_box flex">
					<view class="i_left">所属社区:</view>
					<view class="flex i_box" @click="groupShow=true">
						<input v-model="sq" disabled placeholder="请选择服务社区" placeholder-class="input_p"
							placeholder-style="color:#959190;font-size:24rpx"></u--input>
						<image mode="widthFix" class="xia" src="@/static/img/bxia.png"></image>
					</view>

				</view>

				<view class="input_box flex">
					<view class="i_left">姓名:</view>
					<view class="flex i_box">
						<input v-model="form.name" placeholder="请输入姓名" placeholder-style="color:#959190"></u--input>

					</view>

				</view>

				<view class="input_box flex">
					<view class="i_left">电话:</view>
					<view class="flex i_box">
						<input v-model="form.mobile" placeholder="请输入电话" placeholder-style="color:#959190"></u--input>
					</view>
				</view>

				<view class="input_box flexs">
					<view class="i_left">备注:</view>
					<view class="flex i_box">
						<textarea v-model="form.remark" placeholder-style="color:#959190"></textarea>
					</view>
				</view>
				
				<view class="input_box flexs">
					<view class="i_left">费用合计:</view>
					<view>
						<text class="msg red">￥</text>
						<text  class="red price">{{info.price}}</text>
					</view>
				</view>

			</view>
		</view>
		<view  :class="['btn',system=='ios'?'pm':'']"  @click="toPlay()">立即支付</view>
		<u-select mode="single-column" v-model="groupShow" :list="groupsList" @confirm="confirm"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				params: {
					id: ''
				},
				info: {},
				form: {
					kc_id:'',
					sq_id: '',
					name: '',
					mobile: '',
					remark: ''
				},
				sq:'',
				groupsList: [],
				groupShow: false,
				system:''
			}
		},
		onLoad(e) {
			if (e.id) {
				this.params.id = e.id;
				this.form.kc_id=e.id;
				this.getInfo();
			}
			this.getType();
			this.getUser();
		},
		onShow() {
		this.system = uni.getSystemInfoSync().platform;	
		
		},
		methods: {
			toPlay(){
				let form=JSON.parse(JSON.stringify(this.form));
				form.token=uni.getStorageSync('userToken');
				let _=this;
				this.$post(this.$api.kcPay,form,res=>{
					let {data} = res;
					if(data.code==1){
						
						if(data.msg==1){
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: data.data.timeStamp,
								nonceStr: data.data.nonceStr,
								package: data.data.package,
								signType: data.data.signType,
								paySign: data.data.paySign,
								success: function(res) {
									_.$Toast('支付成功');
									setTimeout(()=>{
										uni.navigateBack();
									},1000);
								},
								fail: function(err) {
									_.$Toast('支付取消');
								}
							});
						}else{
							_.$Toast(data.msg);
							setTimeout(()=>{
								uni.navigateBack();
							},1000);
						}
						
						
					}else{
						_.$Toast(data.msg);
					}
				});
			},
			getUser(){
				this.$get(this.$api.userInfo, {token: uni.getStorageSync('userToken')}, (res) => {
					let {
						data
					} = res;
					if (data.code == 1) {
						this.form.mobile = data.data.mobile;
					}
				})
			},
			confirm(e){
				let item=e[0];
				this.form.sq_id=item.value;
				this.sq=item.label;
				
			},
			getType(){
				this.$get(this.$api.shopType,{},res=>{
					this.groupsList=res.data.data;
					if(res.data.data){
						this.confirm(res.data.data);
					}
					
				});
			},
			getInfo(e) {
				this.$get(this.$api.kcInfo, this.params, res => {

					this.info = res.data.data;

				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.flex {
		display: flex;
		align-items: center;
	}

	.flexs {
		display: flex;
	}

	.box {
		box-sizing: border-box;
		padding: 30rpx;
	}

	.info_box {
		background-color: white;
		box-sizing: border-box;
		padding: 10rpx 20rpx;
		border-radius: 15rpx;
	}

	.img {
		width: 50%;
		height: 180rpx;
	}

	.top {
		display: flex;
		justify-content: space-between;
	}

	.right_box {
		width: 50%;
		box-sizing: border-box;
		padding: 20rpx 0 0 40rpx;
	}

	.msg {
		font-size: 24rpx;
	}


	.price {
		font-weight: bold;
		font-size: 30rpx;
	}

	.red {
		color: #CA1712;
	}

	.name {
		margin-bottom: 20rpx;
	}

	.center {
		box-sizing: border-box;
		padding: 30rpx 0 0 50rpx;
	}

	.input_box {

		margin-bottom: 20rpx;
	}

	.xia {
		width: 30rpx;
	}

	.i_box {
		background-color: #ECECEC;
		box-sizing: border-box;
		padding: 8rpx 0 8rpx 8rpx;
		width: 380rpx;
	}

	.i_left {
		margin-right: 20rpx;
		width: 130rpx;
		text-align: right;
	}

	input {
		width: 320rpx;
		font-size: 22rpx;
		text-align: left;
	}

	textarea {
		height: 120rpx;
		font-size: 22rpx;
		text-align: left;
	}
	.btn {
		position: fixed;
		bottom: 0rpx;
		left: 0%;
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx;
		text-align: center;
		color: white;
		background-color: #E1521A;
		font-size: 36rpx;
	}
	.pm {
		bottom: 45rpx;
	}
</style>